<template>
	<Form id="form">
		<div>
			<div>
				请输入从第几道题开始考试：<input :xs="1" type="number" v-model="lastNum">
				<span style="margin-left: 1%;">请输入想考多少道题：<input :xs="1" type="number" v-model="num"></span>
				<span style="margin-left: 1%;">上次做到第{{lastNum}}题</span>
				<Button type="primary" @click="selectQuestions" style="margin-left: 1%;">确定</Button>
				<Button type="primary" @click="startTest" style="margin-left: 1%;">开始考试</Button>
			</div>
			<br>
			<div>
				<span style="font-size: 16px;color: blue;">考试总分：{{score}}</span>
				<span style="margin-left: 10%;font-size: 16px;color: blue;">考试使用时间：{{testTime}} 分钟</span>
			</div>
			
		</div>
		<br>
		<FormItem v-for="(item,index) in questions" :key="index">
			<p :id="item.id">{{index+1}}、{{item.question}}</p>
			<RadioGroup v-model="item.selectAnswer" @on-change="handleCheck(item)">
				<Radio v-show="item.optionA != ''&& item.optionA != undefined" :key="`A-${index}`"
					:label="'A：'+item.optionA"></Radio>
				<br>
				<Radio v-show="item.optionB != ''&& item.optionB != undefined" :key="`B-${index}`"
					:label="'B：'+item.optionB"></Radio>
				<br>
				<Radio v-show="item.optionC != ''&& item.optionC != undefined" :key="`C-${index}`"
					:label="'C：'+item.optionC"></Radio>
				<br>
				<Radio v-show="item.optionD != '' && item.optionD != undefined" :key="`D-${index}`"
					:label="'D：'+item.optionD"></Radio>
				<br>
				<Radio v-show="item.optionE != ''&& item.optionE != undefined" :key="`E-${index}`"
					:label="'E：'+item.optionE"></Radio>
				<br>
				<Radio v-show="item.optionF != ''&& item.optionF != undefined" :key="`F-${index}`"
					:label="'F：'+item.optionF"></Radio>
				<br>
				<Radio v-show="item.optionG != ''&& item.optionG != undefined" :key="`G-${index}`"
					:label="'G：'+item.optionG"></Radio>
			</RadioGroup>
			<br>
			<!-- <label>本题答案：{{item.answer}}</label> -->
			<hr>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="handleSubmit('formValidate')">交卷</Button>
		</FormItem>
	</Form>
</template>
<script>
	import axios from 'axios'
	import Qs from 'qs'
	import {
		Message
	} from 'view-design';
	export default {
		data() {
			return {
				formItem: {
					checkbox: [],
				},
				questions: [],
				num: 100,
				lastNum: 0,
				score: 100,
				testTime:0,
				startTime: '',
			}
		},
		mounted() {
			this.selectQuestions()
		},
		methods: {
			handleSubmit(name) {
				var ques = this.questions;
				for (var i in ques) {
					if (ques[i].selectAnswer == null) {
						var ele = document.getElementById(ques[i].id);
						ele.style.color = 'red';
						ele.scrollIntoView();
						Message.error("请作答字体为红色的题目");
						return;
					}
					if (ques[i].selectAnswer[0] != ques[i].answer) {
						this.score = this.score - 1;
						var element = document.getElementById(ques[i].id);
						element.style.color = 'red';
						element.innerHTML = element.innerHTML +
							"。您错误选择了:" + ques[i].selectAnswer[0] + "，正确答案为：" + ques[i].answer;
					}
				}
				this.testTime = ((new Date() - this.startTime)/60000).toFixed(2);
				this.$Message.warning("本次考试得分："+this.score)
				axios({
					method: 'post',
					url:'/rc/api/saveTest',
					data: Qs.stringify({
						questions: JSON.stringify(this.questions),
						score:this.score,
						testTime: this.testTime,
						testType: '顺序考试',
						currentNum: this.currentNum,
						num: this.num
					})
				}).then(res => {
					if(res.data.code == 200){
						
					}
				})
			},
			handleCheck(item) {
				if(this.startTime == ''){
					this.$Message.warning("请点击开始考试，再进行答题！");
					item.selectAnswer = '';
					return;
				}
				var element = document.getElementById(item.id);
				if (element.style.color == 'red') {
					element.style.color = 'black';
				}
			},
			startTest(){
				this.startTime = new Date();
			},
			selectQuestions() {
				axios({
					method: 'get',
					url: '/rc/api/findSequenceQuestions?currentNum=' + this.lastNum+'&num=' + this.num,
				}).then(res => {
					this.questions = res.data.data.rcExamList;
					this.lastNum = res.data.data.lastNum;
					this.score = this.questions.length;
					this.$Message.success("查询成功");
				})
			}
		}
	}
</script>

<style scoped>
	#form {
		text-align: left;
	}
</style>